<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>烟花</title>
		<style type="text/css">
			body{
				background: #000000;
			}
			.fire{
				width: 5px;
				height: 5px;
				position: absolute;
			}
			#fire{
				position: absolute;
				width: 8px;
				height: 15px;
				background-color: #FF8C00;
				border-top-left-radius:4px;  
				border-top-right-radius:4px; 
				border-bottom-left-radius:10px;
				border-bottom-right-radius:10px; 
			}
		</style>
	</head>
	<body>
		
	</body>
	<script type="text/javascript">
		function randomColor(){//产生一个随机的颜色
			var color = "rgb(";
			var r = parseInt(Math.random()*256);
			var g = parseInt(Math.random()*256);
			var b = parseInt(Math.random()*256);
			color = color + r + "," + g + "," + b + ")";
			return color;
		}
		
		function Fireworks(div,x,y){//构造一个生成烟花的方法,div为创建的烟花，x和y代表烟花的坐标
			div.style.backgroundColor = randomColor();//创建的烟花设置一个背景颜色
			div.className = "fire";//给创建的烟花增加一个class属性，设置样式
			document.body.appendChild(div);//在body中添加烟花
			div.style.left = x + "px";
			div.style.top = y + "px";
			
			//三目运算符随机移动方向，概率50%,为1时往正方向移动，负1时往反方向移动第二个随机数随机速度快慢
			var speedX = (parseInt(Math.random()*2) == 0 ? 1 : -1) * parseInt(Math.random()*16 + 1);
			var speedY = (parseInt(Math.random()*2) == 0 ? 1 : -1) * parseInt(Math.random()*20 + 1);
			
			//让烟花移动
			this.move = function(){
				var i = 3;
				var time1=setInterval(function(){
					i++;
					div.style.left=div.offsetLeft+speedX+"px";			
					div.style.top=div.offsetTop+speedY+i+"px";   //当i+speedY>0时,烟花朝下运动。
					if(div.offsetLeft+div.offsetWidth>window.innerWidth|| div.offsetLeft<2 || div.offsetTop+div.offsetHeight>window.innerHeight || div.offsetTop<2 ){
						div.remove();		//移动出可视区域记得删除div和清除定时器
						clearInterval(time1);
					}
				},30);
			}
		}
		
		window.onclick=function (e){
			var evt=e||window.event;	//兼容性处理
			for(var i=0;i<80;i++){		//随机烟花的数量
				var div=document.createElement("div");
				var b=new Fireworks(div,evt.pageX,evt.pageY);
				b.move();
			}
		}
		
		window.onload = function(){
			moveFire();
		}
		
		this.moveFire = function(){
			var fire = document.createElement("div");
			var x = 800 + "px";
			var y = 700 + "px";
			fire.id = "fire";
			document.body.appendChild(fire);
			fire.style.left = x;
			fire.style.top = y;
			
			var speed = -20;
			var fire = document.getElementById("fire");
			var timer = setInterval(function(){
				fire.style.top = parseInt(fire.style.top) + speed + "px";
				var top1 = parseInt(fire.style.top.substring(0,3));
				
				if( top1 < 200){
					fire.remove();
					clearInterval(timer);
					for(var i=0;i<80;i++){		//随机烟花的数量
						var div=document.createElement("div");
						var b=new Fireworks(div,800,200);
						b.move();
					}
				}
			},30);
			
			var timer2 = setTimeout("moveFire()",3000);
		}
	</script>
</html>
